<template>
  <div>
<el-form :model="form" ref="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.gender">
          <el-option label="男" value="m"></el-option>
          <el-option label="女" value="f"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="xg()">保存信息</el-button>
      </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form: {
        username: "",
        email: "",
        phone: "",
        gender: "m"
      }
    };
  },
    computed: {
    userInfo() {
      return this.store.get("userInfo");
    }
  },
  created(){
      this.getUser()
  },
  methods:{
      getUser(){
         this.axios.get(`/users/${this.userInfo.id}`).then((ret)=>{
              const {data} = ret.data
              this.form.username = data.username
              this.form.email = data.email
              this.form.phone = data.phone
              this.form.gender = data.gender
          }).catch(()=>{          
          })
      },
      xg(){
          this.axios.post(`users/edit/${this.userInfo.id}`,{
            username:this.form.username,
            email:this.form.email,
            phone:this.form.phone,
            gender:this.form.gender,
          }).then(()=>{
            this.$router.push({name:'users'})
          }).catch(()=>{             
          })
      }
  }
};
</script>

<style scoped>
.el-input {
  width: 400px;
}
</style>
